<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="对账日期：">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="支付状态：">
        <el-select filterable v-model="formInline.paymentStatus" placeholder="请选择">
          <el-option
            v-for="item in paymentStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="manual">手动对账</el-button>
        <el-button type="primary" @click="onSubmit" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="onClear">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="recordList" border>
      <el-table-column align="center" width="50" type="index" :index="indexFun" label="序号"></el-table-column>
      <template v-for="colConfig in colConfigs">
        <el-table-column
          align="center"
          v-if="colConfig.children"
          :label="colConfig.label"
          :key="colConfig.id"
        >
          <template v-for="child in colConfig.children">
            <el-table-column align="center" show-overflow-tooltip v-bind="child" :key="child.id"></el-table-column>
          </template>
        </el-table-column>
        <el-table-column align="center" v-else v-bind="colConfig" :key="colConfig.id"></el-table-column>
      </template>
      <el-table-column align="center" fixed="right" width="250" label="操作">
        <template slot-scope="scope">
          <el-button
            class="seeText"
            type="text"
            @click="details(scope.row.reconciliationTime,'')"
            v-if="scope.$index != 0"
          >总明细查看</el-button>
          <span v-else>——</span>
          <el-button
            type="text"
            @click="details(scope.row.reconciliationTime,1)"
            v-if="scope.$index != 0"
          >差异明细查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next"
      :current-page="formInline.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="formInline.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import utils from "@/common/utils";
import api from "@/api/apiPath";
export default {
  name: "paymentReconciliation",
  data() {
    return {
      paymentStatus: [
        { value: "", label: "全部" },
        { value: 2, label: "支付失败" },
        { value: 3, label: "退款成功" },
        { value: 4, label: "退款中" },
        { value: 5, label: "退款失败" }
      ],
      recordList: [],
      formInline: {
        paymentStatus: "",
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10
      },
      time: [],
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      colConfigs: [
        { prop: "reconciliationTime", label: "对账时间" },
        {
          label: "好生活平台数据",
          children: [
            { prop: "easylifeCount", label: "应收款笔数" },
            { prop: "easylifeCopeNum", label: "应收款金额（元）" }
          ]
        },
        {
          label: "支付平台数据",
          children: [
            { prop: "oppsingCount", label: "实收款笔数" },
            { prop: "easylifePaidNum", label: "实收款金额（元）" }
          ]
        },
        {
          label: "差异",
          children: [
            { prop: "difference", label: "是否差异", formatter: this.difference },
            { prop: "payNum", label: "会员费笔数" },
            { prop: "payOnThisTime", label: "会员费金额" }
          ]
        }
      ]
    };
  },
  created() {
    this.list();
  },
  methods: {
    list() {
      this.$axios.post('/raise/dealingOpposingOrder/selectPaymentReconciliation',this.formInline).then(res => {
        for (let item of res.list) {
          item.earliestTime = utils.getTimeString(item.earliestTime);
          item.operatorTime = utils.getTimeString(item.operatorTime);
          item.latestTime = utils.getTimeString(item.latestTime);
          item.reconciliationTime = utils.getTimeString(item.reconciliationTime);
        }
        this.recordList = res.list;
        if(res.totalData) {
          this.recordList.unshift(res.totalData);
        }
        this.total = res.total;
      });
    },
    handleSizeChange(size) {
      this.formInline.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.formInline.pageNum = page;
      this.list();
    },
    difference(row) {
      if(row.difference == 0) {
        return '否'
      }else {
        return '是'
      }
    },
    onSubmit() {
      this.formInline.beginTime = this.time[0] || '';
      this.formInline.endTime = this.time[1] || '';
      this.formInline.pageNum = 1;
      this.list();
    },
    onClear() {
      this.time = [];
      this.formInline.paymentStatus = '';
      this.list()
    },
    indexFun(index) {
      if (index == 0) {
        return "合计";
      }
      return index;
    },
    details(batchNum, num) {
      this.$router.push({
        path: "./reconciliationOrder",
        query: { batchNum: batchNum, difference: num }
      });
    },
    manual() {
      this.$axios.post('/raise/dealingOpposingOrder/checkData').then(res => {
        this.$message({
          type: "success",
          message: "操作成功"
        });
      });
    }
  }
};
</script>

<style scoped>
.seeText::after {
  content: "|";
  margin-left: 5px;
  color: #409eff !important;
}
</style>